<template>
	<view class="container">
		<view class="list_item flex_box">
		  <image :src="info.headPic" class="avatar" mode="aspectFill"></image>
		  <view class="flex1 right_box">
		    <view class="flex_box customer_info">
					<view class="customer_label">客户姓名</view>
					<view class="customer_con">{{info.customerName}}</view>
				</view>
				<view class="flex_box customer_info">
					<view class="customer_label">联系方式</view>
					<view class="customer_con">{{info.customerPhone}}</view>
				</view>
				<view class="flex_box customer_info">
					<view class="customer_label">联系地址</view>
					<view class="customer_con">{{info.customerAddr}}</view>
				</view>
		  </view>
		</view>
		<view class="application">
			<view class="flex_box customer_info">
				<view class="customer_label">签到时间</view>
				<view class="flex1">{{time}}</view>
			</view>
			<view class="flex_box customer_info">
				<view class="customer_label">辅导时长</view>
				<view class="flex1 customer_con flex_box">
					<view class="radio_item flex_box" @tap="timeChoose(index)" v-for="(item,index) in timeList">
						<view class="radio" :class="timeIndex==index?'check':''"></view>{{item}}小时
					</view>
				</view>
			</view>
			<view class="flex_box customer_info">
				<view class="customer_label">签到位置</view>
				<view class="flex1 customer_con">{{params.signAddr}}</view>
			</view>
			<view class="flex_box customer_info">
				<view class="customer_label">签到照片</view>
			</view>
			<view class="flex_box_wrap">
				<view class="img_box" v-for="(item,index) in params.signPicList">
					<image :src="item" class="img"></image>
					<image src="../../static/images/del.png" class="del_icon" @tap="delIcon(index)"></image>
				</view>
				<view class="img_box" v-if="params.signPicList.length<3">
					<image :src="upimg2" class="img" @tap="chooseImg"></image>
				</view>
			</view>
		</view>
		<view class="btn" @tap="submit">提交</view>
	</view>
</template>

<script>
	import {toast} from '@/common/js/public.js'
	import { pathToBase64 } from 'image-tools'
	export default {
		data() {
			return {
				info:{
					headPic:'',
					customerName:'',
					customerPhone:'',
					customerAddr:'',
				},
				defaultImg:require('@/static/images/img2.png'),
				upimg2:require('@/static/images/upimg2.png'),
				timeList:[2,3,4],
				timeIndex:0,
				teacherInfo:'',
				params:{
					"customerCode": '',
					"signAddr": "",
					"signPicList": [],
					"teacherNo":'',
					"useClassCount": 2
				}
			}
		},
		onLoad(option){
			this.teacherInfo = uni.getStorageSync('teacher_userinfo')
			let info = uni.getStorageSync('teacher_info')
			console.log(info)
			if (info) {
				// uni.removeStorageSync('teacher_info')
				this.info.customerName = info.customerName
				this.info.customerPhone = info.customerPhone
				this.info.customerAddr = info.customerAddr
				this.info.headPic = info.headPic || this.defaultImg
				this.params.customerCode = info.customerCode
			}
			this.params.teacherNo = this.teacherInfo.teacherNo
			let date = new Date()
			let yy = date.getFullYear()
			let mm = date.getMonth() + 1
			let dd = date.getDate()
			let hh = date.getHours()
			let mf = date.getMinutes()
			mf = mf < 10 ? '0' + mf : mf
			let ss = date.getSeconds()
			ss = ss < 10 ? '0'+ss : ss
			this.time = yy + '年' + mm + '月' + dd + '号' + hh + ':' + mf + ':' + ss
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo', 
						data: {
							key: '1cba6c8f2418355638fd2b90cb27a137',
							location:res.longitude+','+res.latitude
						},
						success: (res) => {
							if (res.data.status == '1') {
								this.params.signAddr = res.data.regeocode.formatted_address
							}
						}
					});
				}
			});
		},
		methods: {
			timeChoose(index) {
				this.timeIndex = index
				this.params.useClassCount = this.timeList[index]
			},
			delIcon(idx) {
				this.params.signPicList.splice(idx,1)
			},
			chooseImg() {
				if (this.params.signPicList.length == 3) {
					toast('最多只能上传三张')
					return
				}
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let urlList = res.tempFilePaths
						urlList.forEach(url=>{
							uni.showLoading({
							  title: '上传中...'
							});
							let urlList = res.tempFilePaths
							uni.uploadFile({
									url: this.baseUrl+'/api/api/file/aliYunUpload', //仅为示例，非真实的接口地址
									filePath: url,
									name: 'file',
									success: (uploadFileRes) => {
										this.params.signPicList.push(JSON.parse(uploadFileRes.data).data.url)
										uni.hideLoading();
									},
									fail() {
										toast('上传失败，请重试')
										uni.hideLoading();
									}
							});
							// pathToBase64(url).then(base64 => {
							// 	this.params.signPicList.push(base64)
							// }).catch(error => {
							// 	console.error(error)
							// })
						})
					}
				});
			},
			submit() {
				this.$api.teacherSign(this.params).then(res=>{
					if (res.code == 1) {
						toast('签到成功')
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1000)
					} else {
						toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped>
	@import '../../common/common.css';
	.container{
		min-height: calc(100vh - 88rpx);
	  font-size: 26rpx;
	  color:#333;
		background-color: #fafafa;
		box-sizing: border-box;
	}
	.list_item{
		background-color: #fff;
		padding:20rpx 30rpx;
		border:none;
	}
	.application{
		margin-top: 20rpx;
		background-color: #fff;
		padding:20rpx 30rpx;
	}
	.application .customer_info{
		margin-bottom: 20rpx;
	}
	.img_box{
		width: 210rpx;
		height: 190rpx;
		border-radius: 10rpx;
		position: relative;
		margin:0 30rpx 30rpx 0;
	}
	.img_box:nth-child(3n){
		margin-right: 0;
	}
	.img{
		width: 210rpx;
		height: 190rpx;
		border-radius: 10rpx;
	}
	.del_icon{
		width: 24rpx;
		height: 26rpx;
		position: absolute;
		right:-20rpx;
		top:-20rpx;
		padding:10rpx;
	}
	.radio_item{
		margin-right: 30rpx;
	}
	.radio{
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		border:2rpx solid #666666;
		box-sizing: border-box;
		position: relative;
		margin-right: 10rpx;
	}
	.radio::after{
		display: block;
		content: '';
		position: absolute;
		left: 4rpx;
		top:4rpx;
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
	}
	.radio.check::after{
		background-color: #666666;
	}
	.btn{
		position: absolute;
		left: 50%;
		margin-left: -250rpx;
		bottom:100rpx;
		width: 500rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #34BE97;
		color:#fff;
		border-radius: 70rpx;
	}
</style>
